<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rect节点分组</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
  const data = {
    nodes: [
      {id: '1', x: 50, y: 50, size: 20},
      {id: '2', x: 150, y: 50, size: 20},
      {id: '3', x: 200, y: 50, size: 20},
      {id: '4', x: 300, y: 130, size: 20},
      {id: '5', x: 350, y: 50, size: 20},
      {id: '6', x: 450, y: 50, size: 20},
      {id: '7', x: 500, y: 50, size: 20},
      {id: '8', x: 600, y: 50, size: 20},
      {id: '9', x: 650, y: 50, size: 20},
      {id: '10', x: 750, y: 50, size: 20},
      {id: '11', x: 800, y: 50, size: 20},
      {id: '12', x: 900, y: 150, size: 20},
      {id: '13', x: 950, y: 50, size: 20},
      {id: '14', x: 1050, y: 150, size: 20},
      {id: '15', x: 1100, y: 50, size: 20},
    ],
    edges: [
      {source: '1', target: '2', shape: 'line', label: 'line'},
      {source: '3', target: '4', shape: 'polyline', label: 'polyline'},
      {source: '5', target: '6', shape: 'arc', label: 'arc'},
      {source: '7', target: '8', shape: 'quadratic', label: 'quadratic'},
      {source: '9', target: '10', shape: 'cubic', label: 'cubic'},
      {source: '11', target: '12', shape: 'cubic-vertical', label: 'cubic-vertical'},
      {source: '13', target: '14', shape: 'cubic-horizontal', label: 'cubic-horizontal'},
      {source: '15', target: '15', shape: 'loop', label: 'loop'}
    ]
  }

  const graph = new G6.Graph({
    container: 'mountNode',
    nodeStateStyles: {
      selected: {
        fill: 'red',
        stroke: 'red',
      }
    },
    modes: {
      default: [
        'drag-node',
        'click-select',
        'brush-select',
        {
          type: 'zoom-canvas',
          sensitivity: 0.3,
        },
      ],
    },
    width: 1500,
    height: 300,
    linkCenter: true      // 使边连入节点的中心
  });
  graph.data(data);
  graph.render();
</script>
</body>
</html>